<nz-card>
  <app-water-mark />
  <div nz-row>
    <div nz-col nzFlex="94px">所属类目:</div>
    <div class="tag-wrap" nz-col nzFlex="1" [ngStyle]="{ maxHeight: expanded ? '58px' : '33px' }">
      <nz-tag class="m-r-25 m-b-10" nzMode="checkable" (click)="allSel()">
        <span class="sp-14">全部</span>
      </nz-tag>
      @for (tag of tagArray; track tag) {
        <nz-tag class="m-r-25 m-b-10" nzMode="checkable" [(nzChecked)]="tag.isChecked">
          <span class="sp-14">{{ tag.name }}</span>
        </nz-tag>
      }
    </div>
    <div nz-col nzFlex="51px">
      @if (!expanded) {
        <a class="operate-text" (click)="expanded = true">
          展开
          <i nz-icon nzTheme="outline" nzType="down"></i>
        </a>
      }
      @if (expanded) {
        <a class="operate-text" (click)="expanded = false">
          收起
          <i nz-icon nzTheme="outline" nzType="up"></i>
        </a>
      }
    </div>
  </div>
  <nz-divider class="m-0" nzDashed></nz-divider>
  <div class="m-t-20 m-b-20" nz-row>
    <div nz-col nzFlex="94px">owner:</div>
    <div class="flex-1" nz-col>
      <div class="left-start-center" nz-row>
        <nz-select nzMode="multiple" [nzPlaceHolder]="'不限'" [(ngModel)]="searchInfo.owner">
          <nz-option nzLabel="我自己" nzValue="1"></nz-option>
          <nz-option nzLabel="吴家豪" nzValue="2"></nz-option>
          <nz-option nzLabel="周星星" nzValue="3"></nz-option>
          <nz-option nzLabel="赵丽颖" nzValue="4"></nz-option>
          <nz-option nzLabel="姚明" nzValue="5"></nz-option>
        </nz-select>
        <a class="operate-text m-l-7">只看自己的</a>
      </div>
    </div>
  </div>
  <nz-divider class="m-0" nzDashed></nz-divider>
  <div class="m-t-20 m-b-20" nz-row [nzAlign]="'middle'">
    <div nz-col nzFlex="94px">其他选项:</div>
    <div nz-col nzFlex="1">
      <div nz-row>
        <div nz-col [nzLg]="8" [nzMd]="12" [nzSm]="12" [nzXl]="8" [nzXs]="12" [nzXXl]="8">
          活跃用户：
          <nz-select class="max-width" [nzPlaceHolder]="'不限'" [(ngModel)]="searchInfo.author">
            <nz-option nzLabel="李三" nzValue="1"></nz-option>
          </nz-select>
        </div>
        <div nz-col [nzLg]="8" [nzMd]="12" [nzSm]="12" [nzXl]="8" [nzXs]="12" [nzXXl]="8">
          好评度：
          <nz-select class="max-width" [nzPlaceHolder]="'不限'" [(ngModel)]="searchInfo.like">
            <nz-option nzLabel="优秀" nzValue="1"></nz-option>
            <nz-option nzLabel="普通" nzValue="2"></nz-option>
          </nz-select>
        </div>
      </div>
    </div>
  </div>
</nz-card>
<nz-card class="m-t-20">
  <app-water-mark />
  <nz-list [nzItemLayout]="'vertical'">
    @for (item of 8 | numberLoop; track $index) {
      <nz-list-item nzNoFlex>
        <nz-list-item-meta>
          <nz-list-item-meta-title>
            <a>Alipay</a>
          </nz-list-item-meta-title>
          <nz-list-item-meta-description>
            <nz-tag>Ant Design</nz-tag>
            <nz-tag>设计语言</nz-tag>
            <nz-tag>蚂蚁金服</nz-tag>
          </nz-list-item-meta-description>
        </nz-list-item-meta>
        段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台
        ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
        <div class="m-t-15 info">
          <div nz-row>
            <nz-avatar class="m-r-8" [nzSize]="'small'" [nzSrc]="'imgs/default_face.png'"></nz-avatar>
            <a class="operate-text">付小小</a>
            <span class="m-r-8">发布在</span>
            <a class="m-r-8 operate-text">https://ant.design</a>
            <time nz-typography nzType="secondary">2021-02-19 14:21</time>
          </div>
        </div>
        <ul nz-list-item-actions>
          <nz-list-item-action>
            <i class="m-r-8" nz-icon nzType="star"></i>
            156
          </nz-list-item-action>
          <nz-list-item-action>
            <i class="m-r-8" nz-icon nzType="like"></i>
            156
          </nz-list-item-action>
          <nz-list-item-action>
            <i class="m-r-8" nz-icon nzType="message"></i>
            2
          </nz-list-item-action>
        </ul>
      </nz-list-item>
    }
  </nz-list>
</nz-card>
